<style lang="scss">
@import "~normalize-css/normalize.css";
@import "~animate.css/animate.min.css";
@import "assets/sass/main.scss";
</style>
<template>
<div>
  <router-view></router-view>
  <div class="loading" id="loading">
      <span></span>
      <span></span>
      <span></span>
      <span></span>
      <span></span>
      <p>加载中</p>
  </div>
</div>
</template>
<script>
  export default {
    data () {
      return {
      }
    },
    methods: {
      /**
       * 设置html字体大小： 10 * 屏幕宽度 ／ 320
       */
      setHtmlFontSize () {
        const screenWidth = window.document.documentElement.clientWidth
        const html = document.querySelector('html')
        const fontSize = 10 * screenWidth / 320
        html.style.fontSize = fontSize + 'px'
      },
      /**
       * 窗口变化事件处理html字体大小
       * @param  {Object} event 触发事件元素
       * @return {Function}     回调函数
       */
      handleResize (event) {
        this.setHtmlFontSize()
      }
    },
    ready () {
      this.setHtmlFontSize()
      window.addEventListener('resize', this.handleResize)
    },
    beforeDestory () {
      window.removeEventListener('resize', this.handleResize)
    }
  }
</script>
